<template>
  <div class="app-wrapper" style="height:100%">
    <!-- <headerTitle :titleList="titleList" :hideButton="true" /> -->
    <div class="app-container" >
      <div class="containerMain" >
          <el-tabs style="width:100%" v-model="activeName" @tab-click="handleClick" ref="block">
                <el-tab-pane style="width:100%" label="呼叫统计" name="first">
                    <div class="search-item">
                        <div class="item-list">
                            <div class="item-con">
                                <span>技能组:</span>
                                <el-select v-model="value" placeholder="请选择" size="mini">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="item-con">
                                <span>日期</span>
                                <el-date-picker
                                    v-model="timeValue"
                                    unlink-panels
                                    size="mini"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    >
                                </el-date-picker>
                            </div>
                            
                        </div>
                        <div class="item-btn">
                            <el-button
                            class="kyeup_search_btn"
                            type="primary"
                            size="mini"
                            @click="() => fetchData(1)"
                            >查找</el-button
                            >
                            <!-- <el-button type="default" size="mini" @click="() => reset()"
                            >重置</el-button
                            > -->
                            <el-button type="default" size="mini" @click="() => exportDetail(1)"
                            >导出</el-button
                            >
                        </div>
                    </div>
                    <div class="container" >
                        <div class="div-table">
                            <el-table
                            :header-cell-style="headerStyle"
                            :data="list"
                            element-loading-text="Loading"
                            fit
                            size="mini"
                            highlight-current-row
                            >
                            <el-table-column label="日期">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="技能组">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="总呼入数量">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="接通数量">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="忽略数量">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="接通率">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="渠道">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane style="width:100%" label="常用语管理" name="four">
                    <div class="header">
                      <div class="header-button">
                        <el-button type="primary" size='small' @click="addSummary" style="width:154px;height:39px;background-color:#CE9C9C;font-size:20px;font-family: Roboto;border:none"
                        >+添加常用语</el-button>
                      </div>
                    </div>
                    <div class="container" >
                        <div class="div-table">
                            <el-table
                            :header-cell-style="headerStyle"
                            :data="list"
                            element-loading-text="Loading"
                            fit
                            size="mini"
                            highlight-current-row
                            >
                            <el-table-column label="快捷语缩写">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="常用语">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="是否生效">
                                <!-- <template slot-scope="scope">{{ scope.row.videoNum }}</template> -->
                                <el-switch
                                  v-model="value1"
                                  >
                                </el-switch>
                            </el-table-column>
                            <el-table-column label="操作" width="243px">
                              <template slot-scope="scope">
                                <el-button type="text" style="font-size:20px" @click="() => editBtn(scope.row)"
                                  >编辑</el-button
                                >
                                <el-button size="small" type="text" style="color:#AC1414;font-size:20px" @click="() => delFn(scope.row)">删除</el-button>
                              </template>
                            </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane style="width:100%" label="小结管理" name="second">
                    <!-- <div>
                      <p style="position:relative;right:0%;z-index:5">+添加小结</p>
                    </div> -->
                    <div class="header">
                      <div class="header-button">
                        <el-button type="primary" size='small' @click="addSummary" style="width:154px;height:39px;background-color:#CE9C9C;font-size:20px;font-family: Roboto;border:none"
                        >+添加小结</el-button>
                      </div>
                    </div>
                    <div class="container" >
                        <div class="div-table">
                            <el-table
                            :header-cell-style="headerStyle"
                            :data="list"
                            element-loading-text="Loading"
                            fit
                            size="mini"
                            highlight-current-row
                            >
                            <el-table-column label="一级目录">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="内容">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="关联业务">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="技能组">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="243px">
                              <template slot-scope="scope">
                                <el-button type="text" style="font-size:20px" @click="() => editBtn(scope.row)"
                                  >编辑</el-button
                                >
                                <el-button size="small" type="text" style="color:#AC1414;font-size:20px" @click="() => delFn(scope.row)">删除</el-button>
                              </template>
                            </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="满意度统计" name="third">
                    <div class="container" style="padding:50px">
                        <div class="div-table">
                            <el-table
                            :header-cell-style="headerStyle"
                            :data="list"
                            element-loading-text="Loading"
                            fit
                            size="mini"
                            highlight-current-row
                            >
                            <el-table-column label="一级目录">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="内容">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="关联业务">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="技能组">
                                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="300px">
                                <template slot-scope="scope">
                                  <el-button type="text" @click="() => viewFn(scope.row)"
                                      >编辑</el-button
                                  >
                                  <el-button type="text" style="color:red" @click="() => delFn(scope.row)"
                                      >删除</el-button
                                  >
                                </template>
                            </el-table-column>
                            </el-table>
                        </div>
                      
                    </div>
                </el-tab-pane>

          </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import selectModule from "@/components/common/selectmodulecopy";
import inputModule from "@/components/common/inputmodule";
import { fetchSeatExport,checkSeatExport, } from "@/api/systemapi/video";//搜索  导出
import {
  fetchList,
  fetchDel,
  fetchDisabled,
  downloadUserInfo,
  fetchExport,
} from "@/api/systemapi/videonumber";
import { pageParams } from "@/settings";

export default {
  name: "videonumber",
  components: {
    Pagination,
    HeaderTitle,
    selectModule,
    inputModule,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "正常",
        2: "注销",
      };
      return statusMap[status];
    },
  },
  data() {
    const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
    const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
    return {
        value1:true,//是否生效
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      activeName: 'second',
      entNum: "",
      titleList: [{ title: "其他管理" }],
      timeValue: [TODAYSTART, TODAYEND],
      tableHeight: "300", //表格默认高度
      // treeData: null,
      list: null,
      listLoading: true,
      searchform: {
        videoNum: "",
        entNum: "",
        rows: "10",
        page: "1",
        gender:"",//性别
        grade:"",//等级
        customerType:"",//客户类型
        customerName:"",//客户名称，
        phoneNumber:"",//手机号
        startTime:"",
        endTime:"",
      },
      optionOrg: [], // 所属机构
      accountList: [], // 账号权限下拉数组
      organprops: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
      // 分页
      pagination: pageParams,
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '昨天',
            onClick(picker) {
              const yestStart =  moment().subtract(1, "days").format('YYYY-MM-DD 00:00:00')
              const yestEnd = moment().subtract(1, "days").format('YYYY-MM-DD 23:59:59')
              picker.$emit('pick', [yestStart,yestEnd]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const startWeek = moment()
                .day(1)
                .startOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              const endWeek = moment()
                .day(7)
                .endOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              picker.$emit("pick", [startWeek, endWeek]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const startLastWeek = moment()
                .day(-6)
                .startOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              const endLastWeek = moment()
                .day(0)
                .endOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              picker.$emit("pick", [startLastWeek, endLastWeek]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              let startMon = moment()
                .month(moment().month())
                .startOf("month");
              let endMon = moment()
                .month(moment().month())
                .endOf("month");
              picker.$emit("pick", [startMon, endMon]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const startLastMon = moment()
                .month(moment().month() - 1)
                .startOf("month");
              const endLastMon = moment()
                .month(moment().month() - 1)
                .endOf("month");
              picker.$emit("pick", [startLastMon, endLastMon]);
            }
          }
        ]
      },

    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    },
  },
  mounted() {
    const { entNum } = this.$route.params;
    this.entNum = entNum;
    this.searchform.entNum = entNum;
    this.fetchData();
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 220;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 220;
        })();
      };
    });
  },
  methods: {
    //tab页的切换
    handleClick(tab, event) {
      console.log(tab,"tab", event,"event");
    },
    exportDemo(type) {
      downloadUserInfo({ ...this.searchform, exportType: type }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        console.log(res, "res");
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    // 重置搜索，刷新列表
    reset() {
      const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
      const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
      this.timeValue = [TODAYSTART, TODAYEND],
      this.searchform = {
        startTime:this.timeValue[0],
        endTime:this.timeValue[1],
        videoNum: "",
        entNum: "",
        rows: "10",
        page: "1",
      },
        this.fetchData();
    },
    //查询
    fetchData(data) {
      console.log(data,"dddddd")//1 呼叫统计查询  2 工作情况统计查询 3 满意度统计查询
      console.log(this.timeValue,"this.timeValue");
      if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.startTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.endTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        console.log(this.searchform.startTime,"231232312");
      fetchList({ ...this.searchform }).then((response) => {
        if (response.code == 0) {
          this.list = response.data.rows;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 新增
    addOrUpdate() {
      this.$router.push({ path: "/vpm/customer/detail" });
    },
    viewFn(data) {
      this.$router.push({
        path: "/vpm/customer/detail",
        query: { type: "2", id: data.id },
      });
    },
    handelExport() {
      if (this.$refs.uploadBatch) {
        this.$refs.uploadBatch.clearFiles();
      }

      this.dialogVisible = true;
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fetchExport(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitUpload() {
      this.$refs.uploadBatch.submit();
    },
    exportDetail(data) {//导出
      console.log(data,"datattadft") //1 呼叫统计导出   2工作情况统计导出  3 满意度统计导出
        if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.startTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.endTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      checkSeatExport({...this.searchform}).then(res=>{//导出验证
        console.log(res,"daochuyanzhneg")
        if(res.code == 0){
          fetchSeatExport({ ...this.searchform }).then((res) => {
            console.log(res,"daochudaochu");
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            console.log(res.headers["content-disposition"],"res.headers[")
            let str = res.headers["content-disposition"].split(";")[1];
            
            // console.log(str,"str1111")
            if (str.indexOf("=") != -1) {
              var filename = decodeURI(str.slice(9));
            } else {
              var filename = decodeURI(str);
            }
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          });
        }else{
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      })
      
    },
    //添加小结
    addSummary(){
      this.$router.push({ path: "/vpm/addsummary/detail" });
    }
    // resetFileds() {
    //   // 重置校验
    //   if (this.$refs["ruleForm"]) {
    //     this.$refs["ruleForm"].resetFields();
    //   }
    // }
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  width: 100%;
  .search-item {
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.header{
    height: 52px;
    padding: 0 30px;
    font-size: 16px;
    color: #333;
    box-shadow: 1px 0 4px #CCC;
    .header-button{
      float:right;
      vertical-align: middle;
    }
  }
</style>
